// /**
//  * @class BaseElement
//  */
// export class BaseElement extends HTMLElement {
//     constructor() {
//         super()
//         const shadowRoot = this.attachShadow({ mode: 'open' })
//         shadowRoot.innerHTML = `<style>${this.getCSSStyle()}</style>
//             ${this.render()}`
//     }
//     // 子类实现该属性
//     // 定义属性
//     props = {
//         /* example */
//         // type: {
//         //     type: String,
//         //     default: ''
//         //     observe: true | false
//         // }
//         // open: {
//         //     type: Boolean,
//         //     default: null
//         // }
//     }
//     // 子类实现该函数
//     // 返回css字符串
//     getCSSStyle() {
//         return ''
//     }
//     // 子类实现该函数
//     // 返回html字符串
//     render() {
//         return ''
//     }
//     // 子类实现该函数
//     // 实现挂载后的处理
//     mounted() { }
//     // 子类实现该函数
//     // 实现属性更新后的处理
//     updated() { }
//     // 子类实现该函数
//     // 实现卸载后的处理
//     unmounted() { }

//     /**
//      * 后面的函数不需要继承的子类实现
//      */
//     // 设置属性的值
//     $setProperty(name, originValue) {
//         if (!name) {
//             return
//         }
//         const propMap = this.props?.[name]
//         if (!propMap) {
//             this.setAttribute(name, originValue)
//             return
//         }
//         switch (propMap.type) {
//             case 'boolean': {
//                 if (originValue) {
//                     this.setAttribute(name, '')
//                 } else {
//                     this.removeAttribute(name)
//                 }
//                 break
//             }
//             // string
//             default: {
//                 this.setAttribute(name, originValue)
//                 break
//             }
//         }
//     }
//     // 获取属性的值
//     $getProperty(name) {
//         if (!name) {
//             return
//         }
//         // 如果为 ''，默认表示为 true
//         // 没有该属性时，值为 null，则定义为 false
//         const originValue = this.getAttribute(name)
//         if (!Object.prototype.toString.call(props) === '[object Object]') {
//             return originValue
//         }
//         const propMap = this.props?.[name]
//         if (!propMap) {
//             return originValue
//         }
//         const {
//             type,
//             default: propDefault
//         } = propMap
//         switch (type) {
//             case Boolean.name: {
//                 return originValue === null
//                     ? false
//                     : originValue === '' || originValue === 'true'
//             }
//             // string
//             default: {
//                 return originValue || typeof propDefault === 'function'
//                     ? propDefault()
//                     : (propDefault)
//             }
//         }
//     }
//     // 生命周期，挂载后回调，不可改
//     connectedCallback() {
//         if (typeof this.mounted === 'function') {
//             this.mounted()
//         }
//         // console.log('connectedCallback')
//     }
//     // 属性更新后回调，不可改
//     attributeChangedCallback(name, oldValue, newValue) {
//         if (typeof this.updated === 'function') {
//             this.updated(name, oldValue, newValue)
//         }
//         // console.log('attributeChangedCallback')
//     }
//     // 生命周期，卸载载后回调，不可改
//     disconnectedCallback() {
//         if (typeof this.unmounted === 'function') {
//             this.unmounted()
//         }
//         // this.$unbind()
//     }
//     // 绑定事件快捷函数
//     $bind(el, eventName, eventHandler, options) {
//         el.addEventListener(eventName, eventHandler, options)
//     }
//     $unbind(el, eventName, eventHandler, options) {
//         el.removeEventListener(eventName, eventHandler, options)
//     }
//     /**
//      * 提交发布事件给外部
//      * https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent
//      * @param {String} eventName 
//      * @param {Object} customEventInit 
//      * @returns 
//      */
//     $emit(eventName, customEventInit) {
//         return this.dispatchEvent(new CustomEvent(eventName, customEventInit))
//     }
//     // 单个选择器
//     $qs(selector) {
//         return this.shadowRoot.querySelector(selector)
//     }
//     // 多个选择器
//     $qsa(selector) {
//         return this.shadowRoot.querySelectorAll(selector)
//     }
// }

/**
 * @class
 */
export class IconElement extends HTMLElement {
    static get observedAttributes() {
        return ['size', 'color']
    }
    /**
     * @param {String} svg 
     * @param {String} style 
     */
    constructor(svg, style = '') {
        super()
        const shadowRoot = this.attachShadow({ mode: 'open' })
        shadowRoot.innerHTML = `<style>
            :host {
                display: inline-flex;
                font-size: ${this.size || 'inherit'};
                color: inherit;
            }
            svg {
                width: 1em;
                height: 1em;
                fill: currentColor;
            }
            ${style}
        </style>
        ${svg}`
    }

    connectedCallback() { }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue === newValue) {
            return
        }
        switch (name) {
            case 'color':
                if (newValue) {
                    this.appendStyle(`:host{color:${newValue}}`)
                }
                break
            default:
                if (newValue) {
                    this.appendStyle(`:host{font-size:${newValue}}`)
                }
                break
        }
    }

    appendStyle(style) {
        const el = document.createElement('style')
        el.innerHTML = style
        this.shadowRoot.append(el)
    }

    set size(value) { this.setAttribute('size', value) }
    get size() { return this.getAttribute('size') }

    get color() { return this.getAttribute('color') }
    set color(value) { this.setAttribute('color', value) }
}
